<template>
  <div class="flex-demo">
    <!-- 主轴对齐示例 -->
    <section class="demo-section">
      <h3>主轴对齐 (justify-content)</h3>
      <div class="flex-container justify-start">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
      </div>
      <div class="flex-container justify-center">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
      </div>
      <div class="flex-container justify-end">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
      </div>
    </section>

    <!-- 交叉轴对齐示例 -->
    <section class="demo-section">
      <h3>交叉轴对齐 (align-items)</h3>
      <div class="flex-container align-container">
        <div class="flex-item">1</div>
        <div class="flex-item tall">2</div>
        <div class="flex-item">3</div>
      </div>
    </section>

    <!-- 弹性增长和收缩示例 -->
    <section class="demo-section">
      <h3>弹性增长和收缩 (flex-grow/shrink)</h3>
      <div class="flex-container grow-container">
        <div class="flex-item grow-1">1 (flex-grow: 1)</div>
        <div class="flex-item grow-2">2 (flex-grow: 2)</div>
        <div class="flex-item grow-1">3 (flex-grow: 1)</div>
      </div>
    </section>

    <!-- 弹性方向示例 -->
    <section class="demo-section">
      <h3>弹性方向 (flex-direction)</h3>
      <div class="flex-container direction-column">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
      </div>
    </section>

    <!-- 排列顺序示例 -->
    <section class="demo-section">
      <h3>排列顺序 (order)</h3>
      <div class="flex-container">
        <div class="flex-item order-3">1 (order: 3)</div>
        <div class="flex-item order-1">2 (order: 1)</div>
        <div class="flex-item order-2">3 (order: 2)</div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
</script>

<style scoped>
.flex-demo {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.demo-section {
  margin-bottom: 30px;
}

h3 {
  color: #333;
  margin-bottom: 10px;
}

.flex-container {
  display: flex;
  margin: 10px 0;
  background-color: #f5f5f5;
  padding: 10px;
  border-radius: 4px;
}

.flex-item {
  padding: 10px;
  background-color: #ff9800;
  color: white;
  margin: 5px;
  text-align: center;
  border-radius: 4px;
  min-width: 60px;
}

/* 主轴对齐样式 */
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }

/* 交叉轴对齐样式 */
.align-container {
  height: 100px;
  align-items: center;
}
.tall {
  height: 80px;
}

/* 弹性增长样式 */
.grow-container .flex-item {
  flex-shrink: 0;
}
.grow-1 { flex-grow: 1; }
.grow-2 { flex-grow: 2; }

/* 弹性方向样式 */
.direction-column {
  flex-direction: column;
  height: 200px;
}

/* 排列顺序样式 */
.order-1 { order: 1; }
.order-2 { order: 2; }
.order-3 { order: 3; }
</style>